<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from "vue";
import GlobalApi from '../../api/global';
import { StaffinfoBean } from "../../Bean/StaffinfoBean";
import { WxResponse } from "../../util/http/axois/AxiosInterface";
export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const staffInfo = ref<StaffinfoBean>({})
    proxy.$toast.loading({
      message: '加载中',
      duration: 0,
    })
    try {
      GlobalApi().getStaffInfo({}).then((res: WxResponse<StaffinfoBean>) => {
        try{
          staffInfo.value = {...res.result}
        }catch(e) {
          console.error(e)
          throw(e)
        }
        proxy.$toast.clear()
      }).catch(e => {
        console.error('获取驾驶员信息出错')
        proxy.$toast.clear()
        proxy.$toast('获取驾驶员信息出错')
      })
    } catch (e) {
      console.error(e)
      throw e
    }
    return {
      staffInfo
    }
  }
})
</script>

<template>
  <div class="my-container">
    <div class="top-box">
      <div class="title">
        个人中心
      </div>
      <div class="user-detail-box">
        <div class="top">
          <div class="left">
            <van-image width="88" height="88" radius="3" :src="staffInfo.Face">
              <template v-slot:loading>
                <img src="/src/assets/default-avatar.png" alt="">
              </template>
            </van-image>
          </div>
          <div class="middel">
            <div style="margin-bottom: 9px;">
              <span style="color: #111111; font-weight: bold; font-size: 20px;">
                {{ staffInfo?.Name }}
              </span>
              <van-tag>
                未实名
              </van-tag>
            </div>
          </div>
          <div class="right">
            查看
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my-container{
  min-height: 100vh;
  min-width: 100vw;
  background: linear-gradient(180deg, #EDF4FF 0%, #FCFCFE 100%);
  .top-box{
    background-image: url('/src/assets/user-bg.png');
    width: 100%;
    height: 210px;
    position: relative;
    .title{
      text-align: center;
      color: white;
      font-size: 19px;
      padding-top: 18px;
    }
    .user-detail-box{
      position: absolute;
      top: 66px;
      left: 16px;
      right: 16px;
      min-height: 200px;
      background: #FFFFFF;
      box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.03);
      border-radius: 6px;
      padding: 36px 16px 0px 16px;
      .top{
        display: flex;
        justify-content: flex-start;
        .left{
          margin-right: 16px;
          img {
            width: 80px;
            height: 80px;
            border-radius: 3px;
          }
        }
        .right{
          
        }
      }
    }
  }
}
</style>
